<script setup lang="ts">
import { useUserStore } from '@/stores/user'

const emit = defineEmits(['update:show'])
// const show = ref(true)
const props = defineProps(['show'])
const UserStore = useUserStore()

const closePopup = () => {
  emit('update:show', false)
}

const codeValue = ref('')

const createCode = (val: string) => {
  codeValue.value = val
}
defineExpose({
  createCode
})
const CodeCom = ref()

const captureView = () => {
  console.log(12323)

  uni
    .createSelectorQuery()
    .select('#viewToCapture')
    .boundingClientRect(function (rect) {
      const ctx = uni.createCanvasContext('myCanvas', CodeCom.value)
      console.log('ctx', ctx, rect)
      ctx.drawImage(rect.left, rect.top, rect.width, rect.height, 0, 0, rect.width, rect.height)
      console.log('drawImage')

      uni.canvasToTempFilePath(
        {
          canvasId: codeId.value,
          success: (res) => {
            console.log(res.tempFilePath)

            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: function () {
                uni.showToast({
                  title: '保存成功',
                  icon: 'none'
                })
              }
            })
          }
        },
        CodeCom.value
      )
    })
    .exec()
}

const codeId = ref('')
const codeReady = (row) => {
  codeId.value = row.canvasId
  console.log('渲染完成', row) 
}
</script>

<template>
  <view ref="CodeCom">
    <canvas canvas-id="myCanvas" style="width: 612rpx; height: 824rpx"></canvas>
    <fui-landscape position="3" :show="show" closable @close="closePopup">
      <view class="Qr-box" id="viewToCapture">
        <view class="top-box">
          <image class="qrImg" mode="widthFix" src="@/static/image/qrImg.png"></image>
        </view>

        <view class="title-box">
          <view class="title"> Panda Furniture</view>
          <view class="subtitle"> Invites Service Providers To Join</view>
        </view>

        <view class="q-code">
          <!--        <image mode="widthFix" src="@/static/image/qrcode.png"></image>-->
          <fui-qrcode
            @ready="codeReady"
            @click="captureView"
            width="340"
            height="340"
            :value="codeValue"
          ></fui-qrcode>
        </view>
        <view class="bottom-box">
          <view class="referrer">Referrer Code: {{ UserStore.invitationCode }}</view>
          <view class="explain flex-row"
            >①
            <view> Save image to gallery</view>
          </view>
          <view class="explain flex-row"
            >②
            <view>Open Panda Furniture and scan the QR code to identify it</view>
          </view>
        </view>
      </view>
    </fui-landscape>
  </view>
</template>

<style scoped lang="scss">
.Qr-box {
  margin: auto;
  width: 612rpx;
  height: 824rpx;
  background-color: #fff;
  overflow: hidden;
  position: relative;

  .top-box {
    position: absolute;
    left: -101rpx;
    overflow: hidden;
    top: -102rpx;
    width: 814rpx;
    height: 372rpx;
    opacity: 1;
    border-radius: 50%;
    //transform: translate(-50%);
    background: linear-gradient(180deg, #f0f5ff 45%, #dde8fd 100%);

    .qrImg {
      position: absolute;
      right: 100rpx;
      top: 100rpx;
      width: 200rpx;
    }
  }

  .title-box {
    font-size: 30rpx;
    position: relative;
    z-index: 1;
    padding: 50rpx 40rpx;
    color: #203a6d;

    .title {
      font-weight: 600;
    }

    .subtitle {
      font-size: 24rpx;
      margin-top: 16rpx;
    }
  }

  .q-code {
    width: 65%;
    margin: auto;
    background-color: #fff;
    position: relative;
    border-radius: 20rpx;
    z-index: 1;
    box-shadow: 0px 0px 20px 0px rgba(67, 109, 193, 0.17);
    padding: 30rpx;

    image {
      width: 100%;
    }
  }

  .bottom-box {
    position: relative;
    z-index: 1;
    padding: 20rpx 40rpx;

    .referrer {
      text-align: center;
      margin-bottom: 20rpx;
      font-size: 26rpx;
      font-weight: 600;
    }

    .explain {
      font-size: 24rpx;
      color: #848484;
      margin-bottom: 20rpx;
      gap: 10rpx;
    }
  }
}
</style>
